<template>
  <div class="x-nav">
    <div
      v-for="item in list"
      :key="item.id"
      :class="selectedKey == item.id ? 'x-li x-li-on' : 'x-li'"
      @click="onClickHadnler(item)"
    >
      {{ item.name }}
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, reactive, toRefs } from "vue";
import { getCategory } from "@/utils/localStorage";

// 类目
interface CategoryENT {
  id: string;
  name: string;
  state: string;
  recommend?: string;
  sort?: number;
}

export default defineComponent({
  name: "SideNavCom",
  components: {},
  props: {},
  data() {
    const selectedKey = "-1";
    const list: Array<CategoryENT> = [];

    return {
      selectedKey,
      list,
    };
  },
  created() {
    this.getCategoryHandler();
  },
  beforeUnmount() {
    //
  },
  computed: {},
  methods: {
    //点击菜单
    onClickHadnler(item: any) {
      this.selectedKey = item.id;
      this.$emit("onSelecte", item.id);
    },
    // 获取类目列表
    getCategoryHandler() {
      getCategory().then((list: Array<CategoryENT>) => {
        list.unshift({ name: "全部", id: "0", state: "1" });
        list.unshift({ name: "推荐", id: "-1", state: "1" });
        this.list = list;
      });
    },
  },
});
</script>

<style scoped lang="less">
.x-nav {
  .x-li {
    cursor: pointer;
    padding: 5px;
    font-size: 14px;
  }

  .x-li:hover,
  .x-li-on {
    background: white;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(2em);
  }
}
</style>
